<template>
  <div class="dashboard-container">
    <div class="detailHearder">
      <div style="flex:1">
        基本信息:
        <el-button type="text" @click="onEdit">编辑基本信息</el-button>
        <el-button type="text" @click="onPwd">重置密码</el-button>
        <el-button type="text" @click="onState">启用</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">姓名：2020-3-20</el-col>
      <el-col :span="8">微信openid：已审批</el-col>
      <el-col :span="8">手机号：230</el-col>
      <el-col :span="8">是否实名：234</el-col>
      <el-col :span="8">省份：5</el-col>
      <el-col :span="8">城市：2016-09-21 08:50:08</el-col>
      <el-col :span="8">状态：北京移动</el-col>
      <el-col :span="8">
        优惠卷数量：
        <span @click="coupon">3</span>
      </el-col>
      <el-col :span="8">证件类型：北京移动</el-col>
      <el-col :span="8">证件号码：北京移动</el-col>
      <el-col :span="24">备注：北京移动</el-col>
    </el-row>
    <el-dialog title="修改" :visible.sync="dialogEdit" width="60%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="8">姓名：2020-3-20</el-col>
          <el-col :span="8">微信openid：dsfdsfsdfsfsdf</el-col>
          <el-col :span="8">手机号：122233335645</el-col>
          <el-col :span="8">是否实名：是</el-col>
          <el-col :span="8">启用：是</el-col>

          <el-col :span="8">
            <el-form-item label="省份：">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市：">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件类型：">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码：">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注：">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogEdit = false">取 消</el-button>

        <el-button size="mini" type="primary" @click="dialogEdit = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="优惠卷数量" :visible.sync="dialogCoupon" width="60%">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="name" label="序号"></el-table-column>
        <el-table-column prop="name" label="优惠卷码"></el-table-column>
        <el-table-column prop="name" label="有效期"></el-table-column>
        <el-table-column prop="name" label="面值"></el-table-column>
        <el-table-column prop="name" label="更新时间"></el-table-column>
        <el-table-column prop="name" label="状态"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogCoupon = false">取 消</el-button>

        <el-button size="mini" type="primary" @click="dialogCoupon = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      input: '',
      formInline: {},
      dialogEdit: false,
      dialogCoupon: false,
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    },
    coupon() {
      this.dialogCoupon = true
    },
    onEdit() {
      this.dialogEdit = true
    },
    onState() {},
    onPwd() {}
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 20px;
}
.searchBox {
  display: flex;
  .inputSearch {
    margin-left: 20px;
    width: 300px;
  }
}
.dashboard {
  &-container {
    margin: 30px;
    .detailHearder {
      display: flex;
      align-items: center;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
